<template>
  <div class="UserConfig">
    <div class="top_serch">
      <el-form style="width: 80%;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;"
        :model="form" label-width="100px">
        <el-form-item label="登录账号：" prop="accountName">
          <el-input clearable v-model="form.accountName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名：" prop="realName">
          <el-input clearable v-model="form.realName" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label="机构级别：" prop="level">
          <el-select clearable v-model="form.level" placeholder="请选择">
            <el-option v-for="item in leveOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div class="serchBtn_box">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="list_box">
      <LsdTable slot="yjrwlb" :paginationAtrrs="table.paginationAtrrs" @pageChange="handleSizeChange"
        :compRef="table.compRef" ref="yjrwlb" :columns="table.columns" :title="table.title" :actions="table.actions"
        :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <div slot="dialog" class="jgpz_box">
        <DialogForm @change="radioChange" v-if="dialogConfig.isShow" @handleNodeClick="handleNodeClick" ref="formTasking"
          :formConfig="formConfig" @select="BzSelect" />
      </div>
    </LsdDialog>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig1" @close="close(dialogConfig1)">
      <DialogForm v-if="dialogConfig1.isShow" slot="dialog" @handleNodeClick="handleNodeClick" ref="formTasking1"
        :formConfig="formConfig1" @select="BzSelect" />
      <!-- <LsdTable slot="dialog" :autoHeight="table1.autoHeight" :multiple="table1.multiple" :paginationAtrrs="table1.paginationAtrrs" @pageChange="handleSizeChange" :compRef="table1.compRef" ref="role" :columns="table1.columns" :title="table1.title" :actions="table1.actions" :tableData="table1.tableData" :tableAttr="table1.tableAttr" :isShowPage="table1.isShowPage" :isSelectFlag="table1.isSelectFlag" :isSequenceFlag="table1.isSequenceFlag"   @onActionClick="onActionClick" /> -->
    </LsdDialog>
  </div>
</template>

<script>
import {
  accountList,
  accountAdd,
  deleteAccount,
  accountUpdate,
  ssdwList,
  ssbmList
} from "@/api/SystemConfig/userConfig";
import { getTrees } from "@/api/SystemConfig/organization";
import { roleDoList, doSaveOrUpdate } from "@/api/SystemConfig/roleConfig";
function checkHeight() {
  const height = `${window.innerHeight - (window.innerHeight * 0.446)}px`;
  return height;
}
export default {
  components: {},
  data() {
    return {
      form: {
        accountName: "",
        realName: "",
        jgjb: ""
      },
      leveOptions: [
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
        {
          value: "3",
          label: "3"
        },
        {
          value: "4",
          label: "4"
        },
        {
          value: "5",
          label: "5"
        },
        {
          value: "6",
          label: "6"
        }
      ],
      // 列表表格
      table: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "用户列表",
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "accountName",
            label: "登录账号",
            align: "center"
          },
          {
            prop: "realName",
            label: "用户姓名",
            align: "center"
          },
          {
            prop: "orgName",
            label: "所属机构",
            align: "center"
          },
          {
            prop: "roleName",
            label: "角色名称",
            align: "center"
          },
          {
            prop: "createTime",
            label: "更新时间",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "120px",
            render: (h, scope) => {
              const arr = ["角色设置", "编辑", "删除"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }

        ],
        tableAttr: {
          "min-height": checkHeight(),
          height: checkHeight(),
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      // 列表表格
      table1: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        autoHeight: true,
        multiple: false,
        title: "",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "roleName",
            label: "角色名称",
            align: "center"
          },
          {
            prop: "description",
            label: "角色说明",
            align: "center"
          }
        ],
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      formConfig: {
        formData: [
          {
            label: "登录账号",
            type: "input",
            prop: "accountName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "用户姓名",
            type: "input",
            prop: "realName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "密码",
            type: "input",
            prop: "keyWord",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "手机号",
            type: "input",
            prop: "phone",
            maxlength: 11,
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "职务",
            type: "input",
            prop: "officeName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            type: "radio",
            label: "是否为领导",
            prop: "leaderFlag",
            class: "half",
            lableWidth: "140px",
            radio: [
              {
                label: "是",
                value: "1",
                isDisabled: false
              },
              {
                label: "否",
                value: "0",
                isDisabled: false
              }
            ]
          },
          {
            type: "selectTree",
            label: "所属机构",
            prop: "orgName",
            name: "orgId",
            keyWord: "keyWords",
            treeRef: "treeRef",
            clickClose: true,
            commonClick: true,
            title: "所属机构选择",
            choose: false,
            ref: "tree_select",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            type: "selectTree",
            label: "所属部门",
            prop: "ssbmName",
            name: "ssbmId",
            keyWord: "keyWords2",
            treeRef: "treeRef2",
            clickClose: true,
            commonClick: true,
            title: "所属机构选择",
            choose: false,
            ref: "tree_select2",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            type: "selectTree",
            label: "所属班组",
            prop: "ssbzName",
            name: "ssbzId",
            keyWord: "keyWords3",
            treeRef: "treeRef3",
            clickClose: true,
            commonClick: true,
            title: "所属班组选择",
            choose: false,
            ref: "tree_select3",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          // {
          //   type: "select",
          //   label: "APP视角",
          //   prop: "appView",
          //   name: "appViewId",
          //   lableWidth: "140px",
          //   class: "sjgy",
          //   option: [
          //     {
          //       label: "管理视角",
          //       value: "1"
          //     },
          //     {
          //       label: "班组视角",
          //       value: "2"
          //     },
          //     {
          //       label: "全部",
          //       value: "3"
          //     }
          //   ]
          // },
          {
            type: "dataPicker",
            label: "更新时间",
            prop: "createTime",
            lableWidth: "140px",
            class: "sjgy",
            dateType: "datetime"
          }
        ],
        rules: {
          accountName: [
            { required: true, message: "请输入登录账号", trigger: "blur" }
          ],
          realName: [
            { required: true, message: "请输入用户姓名", trigger: "blur" }
          ],
          keyWord: [
            { required: true, message: "请输入密码", trigger: "blur" }
          ],
          leaderFlag: [
            { required: true, message: "请选择是否为领导", trigger: "blur" }
          ],
          orgName: [
            { required: true, message: "请选择所属机构", trigger: "blur" }
          ],
          ssbmName: [
            { required: true, message: "请选择所属部门", trigger: "blur" }
          ],
          phone: [
            { required: true, message: "请输入手机号", trigger: "blur" }
          ]
          // appView: [
          //   { required: true, message: "请选择APP视角", trigger: "blur" }
          // ]
        }
      },
      // 新增用户
      dialogConfig: {
        title: "新增用户",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "保存",
            type: "primary",
            id: "save",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      // 角色配置
      dialogConfig1: {
        title: "角色设置",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "保存",
            type: "primary",
            id: "save",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      formConfig1: {
        formData: [
          {
            type: "selectTree",
            label: "关联角色",
            prop: "roleName",
            name: "roleId",
            keyWord: "keyWord",
            treeRef: "treeRef",
            clickClose: false,
            commonClick: true,
            title: "角色选择",
            choose: false,
            ref: "tree_select",
            multiple: true,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "roleName",
                value: "id"
              }
            }
          }
        ],
        rules: {
          orgName: [
            { required: true, message: "请选择关联角色", trigger: "blur" }
          ]
        }
      },
      accountId: ""
    };
  },
  computed: {},
  watch: {
    // "dialogConfig.isShow": {
    //   handler(val) {
    //     if (val && this.dialogConfig.type === "add") {
    //       this.$nextTick(() => {

    //         this.$refs.formConfig.form.leaderFlag = "0";
    //       });
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // },
    // "$refs.formConfig.form.leaderFlag": {
    //   handler(val) {
    //     debugger;
    //     if (this.dialogConfig.isShow && this.dialogConfig.type === "add") {
    //       if (val === "1") {
    //         debugger;
    //         delete this.formConfig.rules.leaderFlag;
    //         console.log(this.formConfig.rules.leaderFlag, "--this.formConfig.rules.leaderFlag");
    //       } else {
    //         debugger;
    //         this.formConfig.rules.leaderFlag = [
    //           { required: true, message: "请选择是否为领导", trigger: "blur" }
    //         ];
    //       }
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  mounted() {
    window.onresize = () => {
      checkHeight();
    };
    this.getlist();
  },
  methods: {
    radioChange(val, item) {
      console.log(val, "--val");
      console.log(item, "--item");
      if (val === "1") {
        this.formConfig.rules.ssbmName = null;
      } else {
        this.formConfig.rules.ssbmName = [
          { required: true, message: "请选择是否为领导", trigger: "blur" }
        ];
      }

    },
    BzSelect(val) {
      console.log(val);
    },
    // 获取所属单位下拉
    getDictionary() {
      this.formConfig.formData.forEach(item => {
        if (item.label === "所属单位") {
          ssdwList().then(res => {
            item.treeData.data = res;
          });
        }
      });
    },
    // 获取所属部门、班组下拉
    getSsbmList(id, type) {
      ssbmList({ orgId: id }).then(res => {
        console.log(res);
        if (type === "ssdw") {
          this.formConfig.formData[6].treeData.data = res;
        } else if (type === "ssbm") {
          this.formConfig.formData[7].treeData.data = res;
        }
      });
    },
    // 树结构点击事件
    handleNodeClick(item, nowId, index, data, node, formConfig) {
      if (item.label === "所属机构") {
        if (this.$refs.formTasking.form.ssbmName) {
          this.$refs.formTasking.form.ssbmName = "";
          this.$refs.formTasking.form.ssbmId = "";
        }
        if (this.$refs.formTasking.form.ssbzName) {
          this.$refs.formTasking.form.ssbzName = "";
          this.$refs.formTasking.form.ssbzId = "";
        }
        this.getSsbmList(nowId, "ssdw");
      } else if (item.label === "所属部门") {
        if (this.$refs.formTasking.form.ssbzName) {
          this.$refs.formTasking.form.ssbzName = "";
          this.$refs.formTasking.form.ssbzId = "";
        }
        this.getSsbmList(nowId, "ssbm");
      }
    },
    getlist(val) {
      let params = {};
      if (val) {
        params = { ...val };
      } else {
        params = {
          pageNum: 1,
          pageSize: 10
        };
      }
      accountList(params).then(res => {
        this.table.tableData = res.data;
        this.table.paginationAtrrs.total = res.total;
        this.table.paginationAtrrs.pageNum = params.pageNum;
        this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = params.pageNum;
        this.table.paginationAtrrs.pageSize = params.pageSize;
      });
    },
    query() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        ...this.form
      };
      this.getlist(params);
    },
    reset() {
      this.form = {};
      this.getlist();
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 用户新增
    add() {
      this.formConfig.formData[6].treeData.data = [];
      this.formConfig.formData[7].treeData.data = [];
      this.dialogConfig.isShow = true;
      this.dialogConfig.type = "add";
      this.$nextTick(() => {
        // 默认不是领导
        this.$set(this.$refs.formTasking.form, "leaderFlag", "0");
      });
      this.getOrgTree();
      this.getDictionary();
    },
    // 组织机构树查询
    getOrgTree() {
      getTrees().then(res => {
        this.formConfig.formData[5].treeData.data = res;
      });
    },
    // 获取角色列表
    getRoleList(val) {
      // let params = {};
      // if (val) {
      //   params = { ...val };
      // } else {
      //   params = {
      //     pageNum: 1,
      //     pageSize: 10
      //   };
      // }
      roleDoList({}).then(res => {
        this.formConfig1.formData[0].treeData.data = res;
        console.log(this.formConfig1.formData[0].treeData.data, "--this.formConfig1.formData[0].treeData.data");
        // this.table1.tableData = res.data;
        // this.table1.paginationAtrrs.total = res.total;
      });
    },
    // 分页
    handleSizeChange(val) {
      if (this.dialogConfig1.isShow) {
        const params = {
          pageNum: val["current-page"],
          pageSize: val["page-size"]
        };
        this.getRoleList(params);
      } else {
        const params = {
          pageNum: val["current-page"],
          pageSize: val["page-size"],
          ...this.form
        };
        this.getlist(params);
      }
    },
    close(val) {
      val.isShow = false;
      this.$set(this.$refs.formTasking, "form", {});
    },
    // 保存
    async save() {
      if (this.dialogConfig.isShow) {
        this.$refs.formTasking.isValidate();
        const flag = this.$refs.formTasking.flag || false;
        const params = {
          ...this.$refs.formTasking.form,
          ssdwId: this.$refs.formTasking.form.orgId
          // appView: "管理视角",
          // appViewId: "1"
        };
        if (flag) {
          if (this.dialogConfig.type === "edit") {
            accountUpdate(params).then(res => {
              if (res) {
                this.$message({
                  message: "编辑成功!",
                  type: "success"
                });
                this.dialogConfig.isShow = false;
                this.getlist();
              }
            });
          } else {
            accountAdd(params).then(res => {
              if (res) {
                this.$message({
                  message: "添加成功!",
                  type: "success"
                });
                this.dialogConfig.isShow = false;
                this.getlist();
              }
            });
          }
        }
      } else {
        const params = {
          roleId: this.$refs.formTasking1.form.roleId.join(),
          roleName: this.$refs.formTasking1.form.roleName.join(),
          userId: this.accountId
        };
        await doSaveOrUpdate(params).then(res => {
          if (res) {
            this.$message({
              message: "关联成功!",
              type: "success"
            });
            this.dialogConfig1.isShow = false;
            this.getlist();
          }
        });
      }
    },
    editAccount(scope) {
      this.dialogConfig.isShow = true;
      this.$nextTick(() => {
        this.$refs.formTasking.form = { ...scope.row };
        if (scope.row.leaderFlag === "1") {
          this.formConfig.rules.ssbmName = null;
        } else {
          this.formConfig.rules.ssbmName = [
            { required: true, message: "请选择是否为领导", trigger: "blur" }
          ];
        }
      });
      this.getSsbmList(scope.row, "ssdw");
    },
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.dialogConfig = {
          title: "用户编辑",
          isShow: false,
          type: "edit",
          btnList: [
            {
              name: "保存",
              type: "primary",
              id: "save",
              size: "mini"
            },
            {
              name: "取消",
              id: "cancel",
              size: "mini"
            }
          ],
          width: "40%"
        };
        if (scope.row.ssdwId) {
          this.getSsbmList(scope.row.ssdwId, "ssdw");
        }
        if (scope.row.ssbmId) {
          this.getSsbmList(scope.row.ssbmId, "ssbm");
        }
        this.getOrgTree();
        this.getDictionary();
        this.editAccount(scope);
      } else if (item === "角色设置") {
        console.log(scope, "---scope");
        this.dialogConfig1.isShow = true;
        this.getRoleList();
        this.accountId = scope.row.id;
        this.$nextTick(() => {
          this.$refs.formTasking1.form.roleId = (scope.row.roleId)?.split(",") || [];
          this.$refs.formTasking1.form.roleName = (scope.row.roleName)?.split(",") || [];
        });
      } else if (item === "删除") {
        this.$confirm("此操作将永久删除该账户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          deleteAccount({ id: scope.row.id }).then(res => {
            if (res) {
              this.$message({
                message: "删除成功!",
                type: "success"
              });
              this.getlist();
            }
          });
        })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });

      }
    },
    // 取消
    cancel() {
      this.dialogConfig.isShow = false;
    }

  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.UserConfig {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;

  .top_serch {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;

    :deep(.el-input__inner) {
      height: 32px;
      width: 320px !important;
      margin-bottom: 0;
    }

    :deep(.el-form-item__content) {
      width: 320px !important;
    }

    :deep(.el-form-item) {
      margin-bottom: 0;
    }

    .serchBtn_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .list_box {
    width: 100%;
    flex: 1;
  }

  :deep(.el-dialog) {
    height: 70% !important;
  }
}

.jgpz_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-input__inner) {
    height: 32px;
    margin-bottom: 0;
  }
}

:deep(.EmergencyList-dialog-form-item) {
  justify-content: center !important;
}

:deep(.el-form-item__content) {
  width: 525px !important;
}

:deep(.el-select--small) {
  width: 525px !important;
}

:deep(.treeList) {
  .treeSerch {
    .el-input__inner {
      width: 380px !important;
      height: 32px;
      margin-bottom: 0;
    }
  }
}
</style>
